import React, {useEffect, useRef} from 'react';
import ReactDOM from 'react-dom';
import G6 from '@antv/g6';
import data from './data.json';

const ArcDiagram = () => {
  const ref = useRef(null);
  useEffect(() => {
    const container = ReactDOM.findDOMNode(ref.current);
    const width = container.scrollWidth || 500;
    const height = container.scrollHeight || 500;
    const colors = [
      'rgb(91, 143, 249)',
      'rgb(90, 216, 166)',
      'rgb(93, 112, 146)',
      'rgb(246, 189, 22)',
      'rgb(232, 104, 74)',
      'rgb(109, 200, 236)',
      'rgb(146, 112, 202)',
      'rgb(255, 157, 77)',
      'rgb(38, 154, 153)',
      'rgb(227, 137, 163)',
    ];
    let graph = new G6.Graph({
      container: container,
      width,
      height,
      linkCenter: true
    });
    graph.on('edge:mouseenter', function (e) {
      const edge = e.item;
      graph.setItemState(edge, 'hover', true);
    });
    graph.on('edge:mouseleave', function (e) {
      const edge = e.item;
      graph.setItemState(edge, 'hover', false);
    });

    const edges = data.edges;
    const nodes = data.nodes;
    const nodeMap = new Map();
    const clusterMap = new Map();
    let clusterId = 0;
    const n = nodes.length;
    const horiPadding = 10;
    const begin = [horiPadding, height * 0.7];
    const end = [width - horiPadding, height * 0.7];
    const xLength = end[0] - begin[0];
    const yLength = end[1] - begin[1];
    const xSep = xLength / n;
    const ySep = yLength / n;
    nodes.forEach(function (node, i) {
      node.x = begin[0] + i * xSep;
      node.y = begin[1] + i * ySep;
      nodeMap.set(node.id, node);
      // cluster
      if (node.cluster && clusterMap.get(node.cluster) === undefined) {
        clusterMap.set(node.cluster, clusterId);
        clusterId++;
      }
      const id = clusterMap.get(node.cluster);
      if (node.style) {
        node.style.fill = colors[id % colors.length];
      } else {
        node.style = {
          fill: colors[id % colors.length],
        };
      }
      // label
      node.label = node.name;
      node.labelCfg = {
        position: 'bottom',
        offset: 5,
        style: {
          rotate: Math.PI / 2,
          textAlign: 'start',
          fill: '#fff',
        },
      };
    });
    edges.forEach((edge) => {
      edge.type = 'arc';
      const source = nodeMap.get(edge.source);
      const target = nodeMap.get(edge.target);
      const endsSepStep = (target.x - source.x) / xSep;
      const sign = endsSepStep < 0 ? -1 : 1;
      edge.curveOffset = sign * 10 * Math.ceil(Math.abs(endsSepStep));
      edge.color = source.style.fill;
      edge.sourceName = source.name;
      edge.targetName = target.name;
      edge.style = {...edge.style, lineWidth: edge.sourceWeight % 10};
    });

    let maxValue = -9999, minValue = 9999;
    nodes.forEach(function (n) {
      if (maxValue < n.value) maxValue = n.value;
      if (minValue > n.value) minValue = n.value;
    });
    const sizeRange = [3, 25];
    const sizeDataRange = [minValue, maxValue];
    scaleNodeProp(nodes, 'size', 'value', sizeDataRange, sizeRange);
    graph.data(data);
    graph.render();


    function scaleNodeProp(nodes, propName, refPropName, dataRange, outRange) {
      const outLength = outRange[1] - outRange[0];
      const dataLength = dataRange[1] - dataRange[0];
      nodes.forEach(function (n) {
        n[propName] = ((n[refPropName] - dataRange[0]) * outLength) / dataLength + outRange[0];
      });
    }
  }, []);

  return <div ref={ref}/>;
}
export default ArcDiagram;